<template>
	<el-header>
		<el-date-picker v-model="search.time" placeholder="查询时间" type="month" value-format="YYYY-MM"></el-date-picker>
		<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
	</el-header>
	<el-main class="nopadding infinite-list" v-infinite-scroll="load" style="overflow:auto;height: 100%">
		<el-empty description="暂无记录" :image-size="100" v-if="recordList.length==0"></el-empty>
		<el-card v-for="item in recordList" class="infinite-list-item" :key="item.attendId" style="cursor: pointer;position: relative;">
			<template v-slot:header>
				<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
					【{{item.title}}】
					<el-tag v-if="item.type=='0'" effect="dark" type="success">正常</el-tag>
					<el-tag v-else-if="item.type=='1'" effect="dark" type="warning">迟到</el-tag>
					<el-tag v-else-if="item.type=='2'" effect="dark" type="warning">早退</el-tag>
					<el-tag v-else-if="item.type=='3'" effect="dark" type="danger">请假</el-tag>
					<el-tag v-else-if="item.type=='4'" effect="dark" type="success">外出</el-tag>
					<el-tag v-else effect="dark" type="info">未知</el-tag>
					<div style="float: right;">{{item.nowTime}}</div>
				</div>
			</template>
			<sc-water-mark ref="wm" :text="waterMarkContent" :subtext="waterMarkSubtext" :showWater="waterMark=='1'">
			<div style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;">
				打卡地点:{{ item.address }}
			</div>
			<div style="margin-top:10px;">
				<div style="display: inline-block">
					打卡方式:
					<el-tag v-if="item.source=='wx'">微信</el-tag>
					<el-tag v-else-if="item.source=='pc'">电脑</el-tag>
					<el-tag v-else-if="item.source=='dd'">钉钉</el-tag>
					<el-tag v-else-if="item.source=='app'">APP</el-tag>
				</div>
				<div style="display: inline-block;float: right;">
					<span style="float: right;margin-left: 20px">
						<el-icon><el-icon-clock/></el-icon>{{ item.createTime }}
					</span>
				</div>
			</div>
			</sc-water-mark>
		</el-card>
	</el-main>
</template>

<script>
export default {
	components: {
	},
	data() {
		return {
			dialog: {
				detailsSave:false,
			},
			loadFlag:true,
			loadStatus:true,
			recordList: [],
			search: {
				page: 0,
				time: ""
			},
			waterMarkContent:'',
			waterMarkSubtext:'',
			waterMark:'0',
		}
	},
	computed: {},
	mounted() {
		this.waterMark = this.$TOOL.data.get("WATER_MARK");
		this.waterMarkContent = this.$TOOL.data.get("WATER_MARK_CONTENT");
		this.waterMarkSubtext = this.$TOOL.data.get("WATER_MARK_SUBTEXT");
		this.getMonth();
	},
	methods: {
		getMonth(){
			var data = new Date()
			var year = data.getFullYear();
			var month = data.getMonth();
			if(month<9)
			{
				this.search.time = year + '-0' + (month + 1)
			}else
			{
				this.search.time = year + '-' + (month + 1)
			}
		},
		async upsearch() {
			this.recordList = [];
			this.search.page = 0;
			this.loadFlag = true;
			this.load();
		},
		load() {
			if(this.loadFlag&&this.loadStatus) {
				this.loadStatus = false;
				this.getMyAttendListForApp();
			}
		},
		async getMyAttendListForApp() {
			let res = await this.$API.office.attend.getMyAttendListForApp.get(this.search);
			if (res.code == 200) {
				this.recordList = this.recordList.concat(res.data);
				this.search.page = this.search.page + 10;
				this.loadStatus = true;
				if(res.data.length<10)
				{
					this.loadFlag = false
				}
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
	}
}
</script>
